<template>
  <div class="admin-container">
    <div class="page-header">
      <h1 class="page-title">
        <el-icon class="title-icon"><Setting /></el-icon>
        管理后台
      </h1>
      <p class="page-subtitle">系统数据统计与内容管理</p>
    </div>

    <div class="content">
      <el-tabs v-model="activeTab">
        <!-- 数据统计 -->
        <el-tab-pane label="数据统计" name="statistics">
          <div class="statistics-container" v-loading="statisticsLoading">
            <!-- 概览卡片 -->
            <el-row :gutter="20" class="stats-cards">
              <el-col :span="8">
                <el-card class="stat-card">
                  <div class="stat-icon user-icon">
                    <el-icon :size="40"><User /></el-icon>
                  </div>
                  <div class="stat-content">
                    <div class="stat-value">{{ statistics.users?.total || 0 }}</div>
                    <div class="stat-label">总用户数</div>
                  </div>
                </el-card>
              </el-col>
              <el-col :span="8">
                <el-card class="stat-card">
                  <div class="stat-icon skill-icon">
                    <el-icon :size="40"><Document /></el-icon>
                  </div>
                  <div class="stat-content">
                    <div class="stat-value">{{ statistics.skills?.total || 0 }}</div>
                    <div class="stat-label">总技能数</div>
                  </div>
                </el-card>
              </el-col>
              <el-col :span="8">
                <el-card class="stat-card">
                  <div class="stat-icon active-icon">
                    <el-icon :size="40"><Check /></el-icon>
                  </div>
                  <div class="stat-content">
                    <div class="stat-value">{{ statistics.users?.active || 0 }}</div>
                    <div class="stat-label">活跃用户</div>
                  </div>
                </el-card>
              </el-col>
            </el-row>

            <!-- 图表 -->
            <el-row :gutter="20" class="charts">
              <el-col :span="12">
                <el-card class="chart-card">
                  <template #header>
                    <div class="card-header">
                      <span>用户状态分布</span>
                    </div>
                  </template>
                  <div ref="userChartRef" class="chart"></div>
                </el-card>
              </el-col>
              <el-col :span="12">
                <el-card class="chart-card">
                  <template #header>
                    <div class="card-header">
                      <span>技能状态分布</span>
                    </div>
                  </template>
                  <div ref="skillChartRef" class="chart"></div>
                </el-card>
              </el-col>
            </el-row>
          </div>
        </el-tab-pane>

        <!-- 用户管理 -->
        <el-tab-pane label="用户管理" name="users">
          <div class="tab-header">
            <el-input
              v-model="userKeyword"
              placeholder="搜索用户名、昵称或邮箱"
              style="width: 300px"
              clearable
              @clear="fetchUsers"
            >
              <template #append>
                <el-button :icon="Search" @click="fetchUsers" />
              </template>
            </el-input>
          </div>

          <el-table :data="users" v-loading="userLoading" style="width: 100%">
            <el-table-column prop="id" label="ID" width="80" />
            <el-table-column prop="username" label="用户名" width="120" />
            <el-table-column prop="nickname" label="昵称" width="120" />
            <el-table-column prop="email" label="邮箱" width="200" />
            <el-table-column prop="school" label="学校" width="150" />
            <el-table-column prop="points" label="积分" width="80" />
            <el-table-column prop="creditScore" label="信誉分" width="80" />
            <el-table-column label="状态" width="100">
              <template #default="{ row }">
                <el-tag :type="row.status === 0 ? 'success' : 'danger'">
                  {{ row.status === 0 ? '正常' : '已封禁' }}
                </el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="createTime" label="注册时间" width="180">
              <template #default="{ row }">
                {{ formatTime(row.createTime) }}
              </template>
            </el-table-column>
            <el-table-column label="操作" fixed="right" width="150">
              <template #default="{ row }">
                <el-button
                  v-if="row.status === 0"
                  size="small"
                  type="danger"
                  @click="handleBanUser(row)"
                >
                  封禁
                </el-button>
                <el-button
                  v-else
                  size="small"
                  type="success"
                  @click="handleUnbanUser(row)"
                >
                  解封
                </el-button>
              </template>
            </el-table-column>
          </el-table>

          <el-pagination
            v-model:current-page="userPage"
            v-model:page-size="userSize"
            :total="userTotal"
            :page-sizes="[10, 20, 50, 100]"
            layout="total, sizes, prev, pager, next, jumper"
            @size-change="fetchUsers"
            @current-change="fetchUsers"
            style="margin-top: 20px; justify-content: center"
          />
        </el-tab-pane>

        <!-- 技能审核 -->
        <el-tab-pane label="技能审核" name="skills">
          <el-table :data="skills" v-loading="skillLoading" style="width: 100%">
            <el-table-column prop="id" label="ID" width="80" />
            <el-table-column prop="title" label="技能标题" width="200" />
            <el-table-column prop="description" label="描述" min-width="250" show-overflow-tooltip />
            <el-table-column prop="categoryName" label="分类" width="100" />
            <el-table-column prop="userNickname" label="发布者" width="120" />
            <el-table-column prop="createTime" label="提交时间" width="180">
              <template #default="{ row }">
                {{ formatTime(row.createTime) }}
              </template>
            </el-table-column>
            <el-table-column label="操作" fixed="right" width="200">
              <template #default="{ row }">
                <el-button
                  size="small"
                  type="success"
                  @click="handleApproveSkill(row)"
                >
                  通过
                </el-button>
                <el-button
                  size="small"
                  type="danger"
                  @click="showRejectDialog(row)"
                >
                  拒绝
                </el-button>
              </template>
            </el-table-column>
          </el-table>

          <el-pagination
            v-model:current-page="skillPage"
            v-model:page-size="skillSize"
            :total="skillTotal"
            :page-sizes="[10, 20, 50, 100]"
            layout="total, sizes, prev, pager, next, jumper"
            @size-change="fetchSkills"
            @current-change="fetchSkills"
            style="margin-top: 20px; justify-content: center"
          />
        </el-tab-pane>

        <!-- 公告管理 -->
        <el-tab-pane label="公告管理" name="notices">
          <div class="tab-header">
            <div></div>
            <el-button type="primary" @click="showNoticeDialog()">
              <el-icon><Plus /></el-icon>
              发布公告
            </el-button>
          </div>

          <el-table :data="noticeList" v-loading="noticeLoading" stripe>
            <el-table-column prop="id" label="ID" width="80" />
            <el-table-column prop="title" label="标题" min-width="200" />
            <el-table-column prop="type" label="类型" width="120">
              <template #default="{ row }">
                <el-tag :type="getNoticeTypeTag(row.type)">
                  {{ getNoticeTypeName(row.type) }}
                </el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="content" label="内容" min-width="300" show-overflow-tooltip />
            <el-table-column prop="createTime" label="发布时间" width="180">
              <template #default="{ row }">
                {{ dayjs(row.createTime).format('YYYY-MM-DD HH:mm') }}
              </template>
            </el-table-column>
            <el-table-column label="操作" width="180" fixed="right">
              <template #default="{ row }">
                <el-button size="small" @click="showNoticeDialog(row)">编辑</el-button>
                <el-button size="small" type="danger" @click="handleDeleteNotice(row.id)">
                  删除
                </el-button>
              </template>
            </el-table-column>
          </el-table>

          <el-pagination
            v-model:current-page="noticePage"
            v-model:page-size="noticeSize"
            :total="noticeTotal"
            :page-sizes="[10, 20, 50, 100]"
            layout="total, sizes, prev, pager, next, jumper"
            @size-change="fetchNotices"
            @current-change="fetchNotices"
            style="margin-top: 20px; justify-content: center"
          />
        </el-tab-pane>
      </el-tabs>
    </div>

    <!-- 拒绝原因对话框 -->
    <el-dialog v-model="rejectDialogVisible" title="拒绝原因" width="500px">
      <el-input
        v-model="rejectReason"
        type="textarea"
        :rows="4"
        placeholder="请输入拒绝原因..."
        maxlength="200"
        show-word-limit
      />
      <template #footer>
        <el-button @click="rejectDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="handleRejectSkill" :loading="rejecting">
          确定
        </el-button>
      </template>
    </el-dialog>

    <!-- 公告编辑对话框 -->
    <el-dialog
      v-model="noticeDialogVisible"
      :title="noticeForm.id ? '编辑公告' : '发布公告'"
      width="600px"
    >
      <el-form :model="noticeForm" ref="noticeFormRef" :rules="noticeRules" label-width="80px">
        <el-form-item label="标题" prop="title">
          <el-input v-model="noticeForm.title" placeholder="请输入公告标题" />
        </el-form-item>
        <el-form-item label="类型" prop="type">
          <el-select v-model="noticeForm.type" placeholder="请选择公告类型">
            <el-option label="系统公告" :value="0" />
            <el-option label="活动公告" :value="1" />
            <el-option label="维护公告" :value="2" />
          </el-select>
        </el-form-item>
        <el-form-item label="内容" prop="content">
          <el-input
            v-model="noticeForm.content"
            type="textarea"
            :rows="6"
            placeholder="请输入公告内容"
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="noticeDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="handleSubmitNotice" :loading="noticeSubmitting">
          {{ noticeForm.id ? '保存' : '发布' }}
        </el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, onMounted, watch, nextTick } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage, ElMessageBox } from 'element-plus'
import { Search, User, Document, Check, Plus, Setting } from '@element-plus/icons-vue'
import dayjs from 'dayjs'
import * as echarts from 'echarts'
import {
  getUserList,
  banUser,
  unbanUser,
  getPendingSkills,
  approveSkill,
  rejectSkill,
  getStatistics
} from '@/api/admin'
import {
  getNoticeList,
  publishNotice,
  updateNotice,
  deleteNotice
} from '@/api/notice'

const router = useRouter()

const activeTab = ref('statistics')

// 数据统计
const statisticsLoading = ref(false)
const statistics = ref({})
const userChartRef = ref(null)
const skillChartRef = ref(null)
let userChart = null
let skillChart = null

// 用户管理
const userLoading = ref(false)
const users = ref([])
const userPage = ref(1)
const userSize = ref(20)
const userTotal = ref(0)
const userKeyword = ref('')

// 技能审核
const skillLoading = ref(false)
const skills = ref([])
const skillPage = ref(1)
const skillSize = ref(20)
const skillTotal = ref(0)

// 拒绝对话框
const rejectDialogVisible = ref(false)
const rejectReason = ref('')
const currentSkill = ref(null)
const rejecting = ref(false)

// 公告管理
const noticeLoading = ref(false)
const noticeList = ref([])
const noticePage = ref(1)
const noticeSize = ref(20)
const noticeTotal = ref(0)
const noticeDialogVisible = ref(false)
const noticeFormRef = ref(null)
const noticeForm = ref({
  id: null,
  title: '',
  content: '',
  type: 0
})
const noticeSubmitting = ref(false)
const noticeRules = {
  title: [{ required: true, message: '请输入标题', trigger: 'blur' }],
  content: [{ required: true, message: '请输入内容', trigger: 'blur' }]
}

const formatTime = (time) => {
  return dayjs(time).format('YYYY-MM-DD HH:mm:ss')
}

const fetchUsers = async () => {
  userLoading.value = true
  try {
    const res = await getUserList({
      page: userPage.value,
      size: userSize.value,
      keyword: userKeyword.value
    })
    users.value = res.data.records || []
    userTotal.value = res.data.total || 0
  } catch (error) {
    console.error('获取用户列表失败：', error)
    ElMessage.error('获取用户列表失败')
  } finally {
    userLoading.value = false
  }
}

const handleBanUser = async (user) => {
  try {
    await ElMessageBox.confirm(`确定要封禁用户"${user.nickname}"吗？`, '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    })
    
    await banUser(user.id)
    ElMessage.success('封禁成功')
    fetchUsers()
  } catch (error) {
    if (error !== 'cancel') {
      console.error('封禁失败：', error)
    }
  }
}

const handleUnbanUser = async (user) => {
  try {
    await unbanUser(user.id)
    ElMessage.success('解封成功')
    fetchUsers()
  } catch (error) {
    console.error('解封失败：', error)
  }
}

const fetchSkills = async () => {
  skillLoading.value = true
  try {
    const res = await getPendingSkills({
      page: skillPage.value,
      size: skillSize.value
    })
    skills.value = res.data.records || []
    skillTotal.value = res.data.total || 0
  } catch (error) {
    console.error('获取技能列表失败：', error)
    ElMessage.error('获取技能列表失败')
  } finally {
    skillLoading.value = false
  }
}

const handleApproveSkill = async (skill) => {
  try {
    await approveSkill(skill.id)
    ElMessage.success('审核通过')
    fetchSkills()
  } catch (error) {
    console.error('审核失败：', error)
  }
}

const showRejectDialog = (skill) => {
  currentSkill.value = skill
  rejectReason.value = ''
  rejectDialogVisible.value = true
}

const handleRejectSkill = async () => {
  if (!rejectReason.value.trim()) {
    ElMessage.warning('请输入拒绝原因')
    return
  }
  
  rejecting.value = true
  try {
    await rejectSkill(currentSkill.value.id, rejectReason.value)
    ElMessage.success('已拒绝')
    rejectDialogVisible.value = false
    fetchSkills()
  } catch (error) {
    console.error('拒绝失败：', error)
  } finally {
    rejecting.value = false
  }
}

const fetchStatistics = async () => {
  statisticsLoading.value = true
  try {
    const res = await getStatistics()
    statistics.value = res.data || {}
    
    // 等待DOM更新后初始化图表
    await nextTick()
    initCharts()
  } catch (error) {
    console.error('获取统计数据失败：', error)
    ElMessage.error('获取统计数据失败')
  } finally {
    statisticsLoading.value = false
  }
}

const initCharts = () => {
  // 用户状态分布饼图
  if (userChartRef.value) {
    if (userChart) {
      userChart.dispose()
    }
    userChart = echarts.init(userChartRef.value)
    
    const userOption = {
      tooltip: {
        trigger: 'item',
        formatter: '{a} <br/>{b}: {c} ({d}%)'
      },
      legend: {
        bottom: '5%',
        left: 'center'
      },
      series: [
        {
          name: '用户状态',
          type: 'pie',
          radius: ['40%', '70%'],
          avoidLabelOverlap: false,
          itemStyle: {
            borderRadius: 10,
            borderColor: '#fff',
            borderWidth: 2
          },
          label: {
            show: false,
            position: 'center'
          },
          emphasis: {
            label: {
              show: true,
              fontSize: 20,
              fontWeight: 'bold'
            }
          },
          labelLine: {
            show: false
          },
          data: [
            { value: statistics.value.users?.active || 0, name: '正常用户', itemStyle: { color: '#67C23A' } },
            { value: statistics.value.users?.banned || 0, name: '已封禁', itemStyle: { color: '#F56C6C' } }
          ]
        }
      ]
    }
    
    userChart.setOption(userOption)
  }
  
  // 技能状态分布饼图
  if (skillChartRef.value) {
    if (skillChart) {
      skillChart.dispose()
    }
    skillChart = echarts.init(skillChartRef.value)
    
    const skillOption = {
      tooltip: {
        trigger: 'item',
        formatter: '{a} <br/>{b}: {c} ({d}%)'
      },
      legend: {
        bottom: '5%',
        left: 'center'
      },
      series: [
        {
          name: '技能状态',
          type: 'pie',
          radius: ['40%', '70%'],
          avoidLabelOverlap: false,
          itemStyle: {
            borderRadius: 10,
            borderColor: '#fff',
            borderWidth: 2
          },
          label: {
            show: false,
            position: 'center'
          },
          emphasis: {
            label: {
              show: true,
              fontSize: 20,
              fontWeight: 'bold'
            }
          },
          labelLine: {
            show: false
          },
          data: [
            { value: statistics.value.skills?.published || 0, name: '已发布', itemStyle: { color: '#409EFF' } },
            { value: statistics.value.skills?.pending || 0, name: '待审核', itemStyle: { color: '#E6A23C' } }
          ]
        }
      ]
    }
    
    skillChart.setOption(skillOption)
  }
}

const getNoticeTypeName = (type) => {
  const types = ['系统公告', '活动公告', '维护公告']
  return types[type] || '系统公告'
}

const getNoticeTypeTag = (type) => {
  const tags = ['', 'success', 'warning']
  return tags[type] || ''
}

const fetchNotices = async () => {
  noticeLoading.value = true
  try {
    const res = await getNoticeList({
      page: noticePage.value,
      size: noticeSize.value
    })
    noticeList.value = res.data.records
    noticeTotal.value = res.data.total
  } catch (error) {
    console.error('获取公告列表失败：', error)
  } finally {
    noticeLoading.value = false
  }
}

const showNoticeDialog = (notice = null) => {
  if (notice) {
    noticeForm.value = {
      id: notice.id,
      title: notice.title,
      content: notice.content,
      type: notice.type
    }
  } else {
    noticeForm.value = {
      id: null,
      title: '',
      content: '',
      type: 0
    }
  }
  noticeDialogVisible.value = true
}

const handleSubmitNotice = async () => {
  await noticeFormRef.value.validate(async (valid) => {
    if (valid) {
      noticeSubmitting.value = true
      try {
        if (noticeForm.value.id) {
          await updateNotice(noticeForm.value.id, {
            title: noticeForm.value.title,
            content: noticeForm.value.content,
            type: noticeForm.value.type
          })
          ElMessage.success('更新成功')
        } else {
          await publishNotice({
            title: noticeForm.value.title,
            content: noticeForm.value.content,
            type: noticeForm.value.type
          })
          ElMessage.success('发布成功')
        }
        noticeDialogVisible.value = false
        fetchNotices()
      } catch (error) {
        console.error('操作失败：', error)
      } finally {
        noticeSubmitting.value = false
      }
    }
  })
}

const handleDeleteNotice = async (id) => {
  try {
    await ElMessageBox.confirm('确定要删除此公告吗？', '提示', { type: 'warning' })
    await deleteNotice(id)
    ElMessage.success('删除成功')
    fetchNotices()
  } catch (error) {
    if (error !== 'cancel') {
      console.error('删除失败：', error)
    }
  }
}

watch(activeTab, (newTab) => {
  if (newTab === 'statistics' && Object.keys(statistics.value).length === 0) {
    fetchStatistics()
  } else if (newTab === 'users' && users.value.length === 0) {
    fetchUsers()
  } else if (newTab === 'skills' && skills.value.length === 0) {
    fetchSkills()
  } else if (newTab === 'notices' && noticeList.value.length === 0) {
    fetchNotices()
  }
})

onMounted(() => {
  fetchStatistics()
})
</script>

<style scoped>
.admin-container {
  min-height: 100%;
  padding: 30px 20px;
  animation: fadeIn 0.6s ease-out;
}

.page-header {
  text-align: center;
  margin-bottom: 40px;
}

.page-title {
  font-size: 32px;
  font-weight: 800;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

.title-icon {
  font-size: 36px;
  color: #667eea;
  animation: pulse 2s ease-in-out infinite;
}

.page-subtitle {
  font-size: 16px;
  color: #666;
  margin: 0;
}

.content {
  max-width: 1500px;
  margin: 0 auto;
  background: white;
  padding: 30px;
  border-radius: 20px;
  box-shadow: 0 8px 32px rgba(102, 126, 234, 0.12);
  border: 1px solid rgba(102, 126, 234, 0.1);
}

.content :deep(.el-tabs__nav-wrap) {
  padding: 0 20px;
}

.content :deep(.el-tabs__item) {
  font-size: 16px;
  font-weight: 600;
  padding: 0 24px;
  transition: all 0.3s;
}

.content :deep(.el-tabs__item.is-active) {
  color: #667eea;
}

.content :deep(.el-tabs__active-bar) {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  height: 3px;
}

.tab-header {
  margin-bottom: 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.tab-header .el-input :deep(.el-input-group__append) {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border: none;
}

.tab-header .el-input :deep(.el-input-group__append .el-button) {
  color: white;
}

.el-pagination {
  display: flex;
  justify-content: center;
  margin-top: 24px;
}

/* 统计看板样式 */
.statistics-container {
  min-height: 500px;
  padding: 20px 0;
}

.stats-cards {
  margin-bottom: 30px;
}

.stat-card {
  display: flex;
  align-items: center;
  padding: 24px;
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(102, 126, 234, 0.05) 0%, rgba(255, 255, 255, 1) 100%);
  transition: all 0.3s;
  border: 1px solid rgba(102, 126, 234, 0.1);
}

.stat-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 12px 32px rgba(102, 126, 234, 0.2);
}

.stat-icon {
  width: 90px;
  height: 90px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 24px;
  transition: all 0.3s;
}

.stat-card:hover .stat-icon {
  transform: scale(1.1) rotate(5deg);
}

.user-icon {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  box-shadow: 0 8px 24px rgba(102, 126, 234, 0.3);
}

.skill-icon {
  background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
  color: white;
  box-shadow: 0 8px 24px rgba(240, 147, 251, 0.3);
}

.active-icon {
  background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
  color: white;
  box-shadow: 0 8px 24px rgba(79, 172, 254, 0.3);
}

.stat-content {
  flex: 1;
}

.stat-value {
  font-size: 36px;
  font-weight: 800;
  color: #303133;
  margin-bottom: 8px;
  letter-spacing: -1px;
}

.stat-label {
  font-size: 15px;
  color: #909399;
  font-weight: 600;
}

.charts {
  margin-top: 30px;
}

.chart-card {
  margin-bottom: 20px;
  border-radius: 16px;
  overflow: hidden;
  transition: all 0.3s;
  border: 1px solid rgba(102, 126, 234, 0.1);
}

.chart-card:hover {
  box-shadow: 0 12px 32px rgba(102, 126, 234, 0.15);
  transform: translateY(-4px);
}

.chart {
  width: 100%;
  height: 350px;
}

.card-header {
  font-weight: 700;
  font-size: 17px;
  color: #333;
}

/* 表格样式优化 */
.content :deep(.el-table) {
  border-radius: 12px;
  overflow: hidden;
}

.content :deep(.el-table thead) {
  background: linear-gradient(135deg, rgba(102, 126, 234, 0.08) 0%, rgba(255, 255, 255, 1) 100%);
}

.content :deep(.el-table th) {
  background: transparent !important;
  font-weight: 700;
  color: #333;
}

.content :deep(.el-table__row:hover) {
  background: linear-gradient(135deg, rgba(102, 126, 234, 0.05) 0%, rgba(255, 255, 255, 1) 100%);
}

.content :deep(.el-button) {
  border-radius: 8px;
  font-weight: 600;
  transition: all 0.3s;
}

.content :deep(.el-button--primary) {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border: none;
}

.content :deep(.el-button--primary:hover) {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(102, 126, 234, 0.3);
}

.content :deep(.el-button--danger) {
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
  border: none;
}

.content :deep(.el-button--success) {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  border: none;
}

.content :deep(.el-button--warning) {
  background: linear-gradient(135deg, #f59e0b 0%, #f97316 100%);
  border: none;
}

/* 对话框样式 */
.content :deep(.el-dialog) {
  border-radius: 16px;
}

.content :deep(.el-dialog__header) {
  padding: 24px 24px 16px;
  border-bottom: 1px solid #f0f2f5;
}

.content :deep(.el-dialog__title) {
  font-weight: 700;
  font-size: 18px;
}

.content :deep(.el-form-item__label) {
  font-weight: 600;
}

/* 响应式设计 */
@media (max-width: 1200px) {
  .stats-cards .el-col {
    margin-bottom: 20px;
  }
}

@media (max-width: 768px) {
  .admin-container {
    padding: 20px 12px;
  }

  .page-title {
    font-size: 24px;
  }

  .title-icon {
    font-size: 28px;
  }

  .page-subtitle {
    font-size: 14px;
  }

  .content {
    padding: 20px;
    border-radius: 12px;
  }

  .stat-card {
    padding: 16px;
  }

  .stat-icon {
    width: 70px;
    height: 70px;
    margin-right: 16px;
  }

  .stat-value {
    font-size: 28px;
  }

  .stat-label {
    font-size: 13px;
  }

  .chart {
    height: 250px;
  }

  .content :deep(.el-table) {
    font-size: 12px;
  }
}
</style>

